<template>
  <!-- 首页 -->
  <div class="timeAxis-swiper" :style="{ borderColor: colorList5[store.styleInfo.colorType - 1].shmentColor }">
    <img
      class="t-image--fit-contain t-image--position-center logo-img-box"
      :src="$filters.getLinkUrl(store.styleInfo.logo, '?imageView2/2/w/200/h/100/format/webp')"
      alt=""
      v-if="store.styleInfo.logo"
    />
    <t-swiper
      :current="current"
      :navigation="{ showSlideBtn: 'never', type: 'never' }"
      class="tdesign-demo-block--swiper"
      :autoplay="false"
      direction="horizontal"
      :duration="300"
      :interval="2000"
      v-if="store.styleInfo.banners.length > 0"
    >
      <t-swiper-item class="swiper-item" v-for="(item, index) in 1" :key="index">
        <div class="demo-item">
          <img
            src="@/assets/templateImg/unit/559910425374789.webp"
            class="demo-item-img t-image t-image--fit-cover t-image--position-center"
          />
        </div>
      </t-swiper-item>
    </t-swiper>
    <div class="swiper-component-solid" v-if="store.styleInfo.banners.length > 1"></div>

    <div
      :class="{
        'type-fiexd-loop': route.meta.loopType && props.fixedType,
        'type-fiexd': props.fixedType,
        'time-box': !props.fixedType,
      }"
    >
      <div class="time-box-content">
        <!-- <div class="btm-box-icon-left-shadow" :class="'btm-box-icon-left-shadow' + store.styleInfo.colorType"></div>
        <div class="btm-box-icon-right-shadow" :class="'btm-box-icon-right-shadow' + store.styleInfo.colorType"></div> -->
        <img
          v-show="props.fixedType"
          src="@/assets/templateImg/unit/559910425374789.webp"
          alt=""
          class="footer-box-bgc1"
          :class="{
            'footer-box-bgc1-loop': route.meta.loopType,
          }"
        />
        <img src="@/assets/templateImg/homeTab1.png" alt="" class="footer-box-bgc" />
        <timeBox />
        <div class="btm-box" v-if="blankType">
          <div class="child-list">
            <div
              @click="blankInfo"
              class="child-list-item child-list-item-blank"
              style="margin-left: 130px"
              :id="'child-list-itemBy' + 10086"
            >
              <div class="top-icon-square">
                <div
                  class="square-top"
                  :style="{ background: colorList5[store.styleInfo.colorType - 1].auxiliaryColor }"
                >
                  <div class="square-top-context"></div>
                </div>
                <div
                  class="square-bottom"
                  :style="{ background: colorList5[store.styleInfo.colorType - 1].auxiliaryColor }"
                ></div>
              </div>
              <div class="child-list-item-bgc">
                <div class="child-list-item-bgc-item" :style="{}"></div>
              </div>
              <div
                class="child-list-item-text child-list-item-text-center"
                :style="{
                  color: '#333',
                  'font-family': store.styleInfo.fontFamily,
                }"
              >
                <arrowLeft iconSize="16px" color="#333" style="margin-right: 4px" />
                <span>返回</span>
              </div>
            </div>
          </div>
        </div>
        <div class="btm-box" v-if="!blankType">
          <!-- <div class="btm-box-icon-left">
            <arrowLeft
              iconSize="32px"
              :color="colorList5[store.styleInfo.colorType - 1].shmentColor"
              @click.stop="catchildModel(1)"
              style="margin-right: 24px"
            />
          </div>
          <div class="btm-box-icon-right">
            <arrowRight
              iconSize="32px"
              :color="colorList5[store.styleInfo.colorType - 1].shmentColor"
              @click.stop="catchildModel(2)"
            />
          </div> -->
          <!-- :style="{ transform: `translateX(-${304 * tabCurrent}px)` }" -->
          <div class="child-list" :class="{ onelist: index == 0 }">
            <!-- 指定 -->
            <div
              @click="addParmasId(item, index)"
              :style="{
                fontFamily: store.styleInfo.fontFamily,
                color: colorList5[store.styleInfo.colorType - 1].themeColor,
                opacity: getopacityType(index),
              }"
              class="child-list-item"
              :class="{ 'child-list-item-mg': index === 2 }"
              ref="div"
              :id="'child-list-itemBy' + index"
              v-for="(item, index) in store.styleInfo.moduleList"
              :key="item.id"
            >
              <div class="top-icon-square">
                <div
                  class="square-top"
                  :style="{ background: colorList5[store.styleInfo.colorType - 1].auxiliaryColor }"
                >
                  <div class="square-top-context"></div>
                </div>
                <div
                  class="square-bottom"
                  :style="{ background: colorList5[store.styleInfo.colorType - 1].auxiliaryColor }"
                ></div>
              </div>
              <div class="child-list-item-bgc">
                <div class="child-list-item-bgc-item">
                  <heardBtnIcon :isActive="store.childModel.id == item.id && tabShow" />
                </div>
              </div>

              <div
                class="child-list-item-text"
                :style="{
                  color: store.childModel.id == item.id && tabShow ? '#333' : '#fff',
                  'font-family': 'SourceHanSerifCN-Bold',
                }"
              >
                <span>{{ item.text }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="btm-bgs" v-if="props.fixedType">
    <img src="@/assets/templateImg/homeTab1.png" alt="" class="footer-box-bgc" />
  </div>
</template>

<script setup lang="ts">
// @ts-nocheck
import { publicUrls } from '@/utils/minxin';
import { pathList, pathListLoop } from '../index';
import heardBtnIcon from './heardBtnIcon.vue';
import arrowLeft from './arrowLeft.vue';
import arrowRight from './arrowRight.vue';
import timeBox from './timeBox.vue';
import { urls } from '@/utils/request/upload';
import { useRoute, useRouter } from 'vue-router';
import { ref, nextTick, onMounted, onUnmounted, onBeforeUnmount, computed, watch } from 'vue';
import { colorList5 } from '../../data';
import { useProjectStore } from '@/store';

const props = defineProps({
  fixedType: {
    type: Boolean,
    default: false,
  },
});
const tabShow = ref(true);
const route = useRoute();
const router = useRouter();
const store = useProjectStore();
const current = ref(0);
const tabCurrent = ref(0);
const blankType = ref(false);
const clieWidths = ref(0);
const updateScreenWidth = () => {
  let widths = window.innerWidth;
  if (widths >= 1920) {
    clieWidths.value = 2;
  } else {
    clieWidths.value = 1;
  }
};
onMounted(() => {
  window.addEventListener('resize', updateScreenWidth);
  updateScreenWidth();
});

// 组件卸载时销毁resize事件监听器
onUnmounted(() => {
  window.removeEventListener('resize', updateScreenWidth);
});
const addCruuent = (e: number) => {
  if (e === 2) {
    if (current.value == store.styleInfo.banners.length - 1) {
      current.value = 0;
    } else {
      current.value = current.value + 1;
    }
  } else {
    if (current.value == 0) {
      current.value = store.styleInfo.banners.length - 1;
    } else {
      current.value = current.value - 1;
    }
  }
};
const getBgcUrl = computed(() => {
  switch (store.styleInfo.colorType) {
    case 1:
      return '@/assets/templateImg/homeTab1.png';
      break;
    case 2:
      return '@/assets/templateImg/homeTab2.png';
      break;
    default:
      return '@/assets/templateImg/homeTab3.png';
      break;
  }
});
nextTick(() => {
  let nums = store.styleInfo.moduleList.findIndex((el) => {
    return el.id == store.childModel.id;
  });
  if (nums !== -1) {
    tabCurrent.value = nums;
    // console.log(nums);
  }
});
const getopacityType = (e: number) => {
  return 1;
};
const emit = defineEmits(['pushTypeShow']);
const blankInfo = () => {
  router.go(-1);
  nextTick(() => {
    setTimeout(() => {
      const ele = document.getElementById('timeAxis-child-box-id'); // 获取元素
      const top = ele.offsetTop - 140; // 获取元素距离文档顶部的距离
      window.scrollTo({
        top: top,
      });
    }, 50);
  });
  emit('pushTypeShow', true);
};
const addParmasId = (info: any, index: number) => {
  tabCurrent.value = index;

  if (info.id == store.childModel.id) {
    let arr = info;
    if (arr.updateType) {
      arr.updateType = true;
    } else {
      arr.updateType = false;
    }

    store.setchildModel(arr);
  } else {
    store.setchildModel(info);
  }
  store.settemplate5Type();
  router.push({
    name: route.meta.loopType ? pathListLoop[0] : pathList[0],
  });
  setTimeout(() => {
    const ele = document.getElementById('timeAxis-child-box-id'); // 获取元素
    const top = ele.offsetTop - 140; // 获取元素距离文档顶部的距离
    window.scrollTo({
      top: top,
    });
  }, 0);
  emit('pushTypeShow', true);
};

let flag = ref(true);
const catchildModel = (e: number) => {
  if (!flag.value) {
    return;
  }
  flag.value = false;

  if (e === 2) {
    if (tabCurrent.value == store.styleInfo.moduleList.length - 1) {
      tabCurrent.value = 0;
    } else {
      tabCurrent.value = tabCurrent.value + 1;
    }
  } else {
    if (tabCurrent.value == 0) {
      tabCurrent.value = store.styleInfo.moduleList.length - 1;
    } else {
      tabCurrent.value = tabCurrent.value - 1;
    }
  }
  store.setchildModel(store.styleInfo.moduleList[tabCurrent.value]);
  // console.log(tabCurrent.value);
  setTimeout(() => {
    flag.value = true;
  }, 500);
};
if (route.meta.blank) {
  blankType.value = true;
} else {
  blankType.value = false;
}
watch(
  route,
  () => {
    if (route.meta.tabShow) {
      tabShow.value = false;
    } else {
      tabShow.value = true;
    }
    if (route.meta.blank) {
      blankType.value = true;
    } else {
      blankType.value = false;
    }
  },
  { deep: true },
);
</script>

<style lang="less" scoped>
@import '../index.less';
.timeAxis-swiper {
  display: flex;
  align-items: flex-end;
  position: relative;
  width: 100%;
  height: calc(100vh);
}
.tdesign-demo-block--swiper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(100vh);
}
.swiper-item {
  width: 100%;
  height: calc(100vh);
}
.demo-item {
  width: 100%;
  height: calc(100vh);
  img {
    width: 100%;
    height: calc(100vh);
  }
}
.swiper-component-btn {
  display: flex;
  position: absolute;
  z-index: 60;
  bottom: 238px;
  right: 130px;
  height: 32px;
}
.swiper-component-solid {
  height: 22px;
  display: flex;
  align-items: center;
  position: absolute;
  bottom: 238px;
  left: 130px;
  z-index: 20;
  .swiper-component-solid-center {
    display: flex;
    width: 240px;
    height: 2px;
    margin: 0 8px;
    border-radius: 1px;
  }
}
.solid-center-item {
  background: rgba(255, 255, 255, 0.3);
  border-radius: 1px;
  cursor: pointer;
}
.active-item {
  background: #ffffff;
  border-radius: 1px;
}
.solid-num-left {
  font-size: 14px;
  font-family: Roboto-Regular, Roboto;
  font-weight: 400;
  color: #ffffff;
  line-height: 22px;
}
.solid-num-right {
  font-size: 14px;
  font-family: Roboto-Regular, Roboto;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.3);
  line-height: 22px;
}
.time-box {
  position: relative;
  z-index: 66;
  width: 100%;
  height: 220px;
}
.type-fiexd {
  position: fixed;
  top: calc(@screen-hw-div-parent-btn - 60px);
  left: 0;
  z-index: 66;
  width: 100%;
  height: 220px;
  overflow: hidden;
}
.type-fiexd-loop {
  position: fixed;
  top: calc(@screen-hw-div-parent-btn-loop - 60px);
  left: 0;
  z-index: 66;
  width: 100%;
  height: 220px;
  overflow: hidden;
}
.time-box-content {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  position: relative;
  width: 100%;
  height: 220px;
  overflow: hidden;
}
.footer-box-bgc {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 220px;
}
.footer-box-bgc1 {
  position: absolute;
  top: calc(220px - 100vh + @screen-hw-div-parent-btn); //
  left: 0;
  width: 100%;
  height: calc(100vh - @screen-hw-div-parent-btn);
}
.footer-box-bgc1-loop {
  position: absolute;
  top: calc(220px - 100vh + @screen-hw-div-parent-btn-loop); //
  left: 0;
  width: 100%;
  height: calc(100vh - @screen-hw-div-parent-btn-loop);
}
.btm-box {
  position: relative;
  width: 100%;
  height: 103px;
  margin-top: -15px;
  overflow: hidden;
}
.btm-box-icon-left-shadow {
  position: absolute;
  left: 0px;
  bottom: 0px;
  width: 286px;
  height: 115px;

  z-index: 40;
}
.btm-box-icon-left-shadow1 {
  background-image: linear-gradient(to left, rgba(120, 48, 42, 0) 0%, rgba(120, 48, 42, 1) 46%, rgba(120, 48, 42, 1));
}
.btm-box-icon-left-shadow2 {
  background-image: linear-gradient(to left, rgba(77, 68, 52, 0), rgba(77, 68, 52, 1) 46%, rgba(77, 68, 52, 1));
}
.btm-box-icon-left-shadow3 {
  background-image: linear-gradient(to left, rgba(31, 33, 42, 0), rgba(31, 33, 42, 1) 46%, rgba(31, 33, 42, 1));
}
.btm-box-icon-right-shadow {
  position: absolute;
  right: 0px;
  bottom: 0px;
  width: 286px;
  height: 115px;
  z-index: 40;
}
.btm-box-icon-right-shadow1 {
  background-image: linear-gradient(to right, rgba(120, 48, 42, 0), rgba(120, 48, 42, 1) 46%, rgba(120, 48, 42, 1));
}
.btm-box-icon-right-shadow2 {
  background-image: linear-gradient(to right, rgba(77, 68, 52, 0), rgba(77, 68, 52, 1) 46%, rgba(77, 68, 52, 1));
}
.btm-box-icon-right-shadow3 {
  background-image: linear-gradient(to right, rgba(31, 33, 42, 0), rgba(31, 33, 42, 1) 46%, rgba(31, 33, 42, 1));
}
.btm-box-icon-left {
  position: absolute;
  left: 130px;
  bottom: 18px;
  z-index: 50;
}
.btm-box-icon-right {
  position: absolute;
  right: 130px;
  bottom: 18px;
  z-index: 50;
}
.child-list {
  display: flex;
  justify-content: center;
  height: 103px;
  transition: all 0.5s;
}
.child-list::-webkit-scrollbar {
  display: none;
}

.child-list-item {
  position: relative;
  display: flex;
  z-index: 50;
  justify-content: center;
  align-items: flex-end;
  height: 103px;
  width: 256px;
  margin-right: 52px;
}
.child-list-item-mg {
  margin-right: 0px;
}
.child-list-item-blank {
  width: 136px;
  :deep(.icon-boxs) {
    width: 136px;
  }
  :deep(.child-list-item-bgc) {
    width: 136px;
  }
  :deep(.child-list-item-bgc-item) {
    width: 136px;
  }
  :deep(.child-list-item-text) {
    width: 136px;
    left: 0;
  }
}
.child-list-item-bgc {
  position: relative;
  height: 58px;
  width: 256px;
}
.child-list-item-bgc-item {
  position: absolute;
  top: 0;
  left: 0;
  height: 58px;
  width: 256px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url('@/assets/templateImg/template5StyleBlank1.svg');
}
.child-list-item-text {
  cursor: pointer;
  position: absolute;
  bottom: 13px;
  left: 31px;
  z-index: 77;
  display: flex;
  text-align: center;
  width: 194px;
  height: 34px;
  font-size: 22px;

  color: #ffffff;
  line-height: 34px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  span {
    width: 194px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}
.child-list-item-active {
  opacity: 1;
}
.top-icon-square {
  position: absolute;
  top: 4px;
  left: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.square-top {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 20px;
  height: 20px;
  background: #8c7a57;
  transform: rotate(45deg);
  border-radius: 2px;
}
.square-top-context {
  width: 14px;
  height: 14px;
  border-radius: 2px;
  border: 2px solid #443c2e;
}
.square-bottom {
  width: 2px;
  height: 24px;
}
.logo-img-box {
  top: 92px;
  left: 130px;
  position: absolute;
  width: 200px;
  height: 100px;
  z-index: 30;
}
.child-list-item-text-center {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 16px;
  margin-left: -4px;
  padding-top: 4px;
  :deep(.icon-boxs) {
    width: 20px;
    height: 20px;
  }
  :deep(span) {
    width: 32px;
    height: 24px;
    font-size: 16px;
    font-family: SourceHanSerifCN-Bold;
    font-weight: bold;
    color: #333333;
    line-height: 24px;
  }
}
.btm-bgs {
  position: fixed;
  top: calc(@screen-hw-div-parent-btn + 89px);
  left: 0;
  width: 100%;
  height: 50px;
  overflow: hidden;
  // background: #ffffff;
  z-index: 30;
  img {
    width: 100%;
    height: 220px;
    margin-top: -170px;
  }
}
</style>
